mapbox | 您所在的位置:网站首页 › mapboxgl 气象 › mapbox |
}地图开发中,弹出气泡的功能也是经常使用到的,显示poi的详细信息,加载一些多媒体的信息,同时,气泡跟随对应poi的位置进行移动。 mapbox-gl有对应的弹出气泡实现:Popup,通过初始化气泡对象就能够实现气泡的效果。 气泡通过setLngLat设置气泡在地图上的位置,这样才能随着地图移动而进行变化。 点击一个poi,显示气泡的效果: map.on('click', 'places', function (e) { //获取点击对象的坐标信息 var coordinates = e.features[0].geometry.coordinates.slice(); //气泡的内容放在图层源数据的属性中 var description = e.features[0].properties.description; //添加气泡到地图上 new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(description) .addTo(map); }); 鼠标移动到对象上,显示气泡的事件: map.on('mouseenter', 'places', function (e) {}); 鼠标移出对象,删除气泡的事件: map.on('mouseleave', 'places', function () {}); mapbox-gl中使用Marker的时候,可以在Marker上关联一个气泡的信息,在Marker上点击,就能够实现弹出气泡的效果,相关代码: new mapboxgl.Marker(el) .setLngLat(monument) .setPopup(popup) .addTo(map); 气泡中的内容可以使用文本,也能够使用带样式的html内容。 气泡的外边框样式,需要重写默认的mapbox-gl自带的气泡样式,设置背景等效果,这个在chrome调试样式时,能够看到,其中涉及到的关键css名称有: .mapboxgl-popup-content .mapboxgl-popup-close-button |
CopyRight 2018-2019 实验室设备网 版权所有 |